<template>
  <el-drawer v-model="drawer" size="60%" :before-close="handleClose">
    <template #header>
      <div class="order-detail-title">订单编号： {{ dataInfo?.order_no }}</div>
    </template>
    <div class="drawer-content order-detail">
      <!-- <div class="content-head">
        <el-icon class="icon">
          <IEpUserFilled />
        </el-icon>
        <label>销售：</label>
        <span>{{ dataInfo?.puid }}</span>
        <div></div>
        <el-icon class="icon">
          <IEpClock />
        </el-icon>
        <label>创建时间：</label>
        <span>{{ dataInfo?.created_at }}</span>
      </div> -->
      <div style="padding: 10px 20px">
        <el-steps :active="stepData">
          <el-step title="买家下单" />
          <el-step title="买家付款" />
          <el-step title="卖家发货" />
          <el-step title="交易完成" />
        </el-steps>
      </div>
      <div class="item-title">基本信息</div>
      <div class="detail-section-1">
        <el-descriptions :column="2">
          <!-- <el-descriptions-item width="50%" label="用户昵称：">
            {{ dataInfo?.user?.nickname }}
          </el-descriptions-item> -->
          <el-descriptions-item width="50%" label="用户姓名：">
            {{ dataInfo?.user?.username }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="订单金额：">
            {{ dataInfo?.amount_real }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="收货人：">
            {{ dataInfo?.send?.address_name }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="收货人电话：">
            {{ dataInfo?.send?.address_phone }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="收货人地址："
            >{{ dataInfo?.send?.address_province }}
            {{ dataInfo?.send?.address_city }}
            {{ dataInfo?.send?.address_area }}
            {{ dataInfo?.send?.address_content }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="订单提交时间：">
            {{ dataInfo?.send?.created_at }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1">
          <el-descriptions-item width="100%" label="备注：">
            {{ dataInfo?.order_remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="item-title">商品信息</div>
      <div class="detail-section-3">
        <el-table border stripe :data="dataInfo?.items">
          <el-table-column label="用户信息" width="300">
            <template #default="{ row }">
              <div class="manage-info">
                <el-image
                  :preview-teleported="true"
                  style="width: 50px; min-width: 50px; height: 50px"
                  :src="imgSrc(row?.goods_cover)"
                  :zoom-rate="1.2"
                  :preview-src-list="[imgSrc(row?.goods_cover)]"
                  :initial-index="4"
                  fit="cover"
                  class="img-box"
                />
                <div class="right">
                  <div>
                    <span>{{ row?.goods_name }} </span>
                  </div>
                  <div>
                    <span>{{ row?.goods_code }} </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="goods_kind" label="商品类型" />
          <el-table-column prop="goods_spec" label="规格" />
          <el-table-column prop="price_market" label="市场单价" />
          <el-table-column prop="price_selling" label="销售单价" />
          <el-table-column prop="stock_sales" label="商品数量" />
          <el-table-column prop="total_selling" label="总价" />
          <!-- <el-table-column label="操作" width="120" align="center" fixed="right">
            <template #default="{ row }">

              <el-button type="primary" link @click="sendOrder(row)">
                发货
              </el-button>
              <el-button type="danger" link @click="delFun(row)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="item-title">支付明细</div>
      <div class="detail-section-2">
        <el-descriptions :column="2">
          <el-descriptions-item width="50%" label="订单总金额：">
            {{ dataInfo?.amount_total }}
            <!-- <el-button
              class="btn"
              size="small"
              type="primary"
              @click="openPrice"
              v-if="priceType && dataInfo?.status == 1"
              >改价</el-button
            >
            <el-dialog v-model="priceVisible" title="改价" width="30%">
              <el-form :model="priceForm" ref="priceFormRef">
                <el-form-item
                  label="价格（元）"
                  :rules="[
                    {
                      required: true,
                      message: '价格',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input placeholder="价格" v-model="priceForm.money" />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="priceVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitPrice">
                    确认
                  </el-button>
                </span>
              </template>
            </el-dialog> -->
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="优惠券：">
            {{ dataInfo?.coupon_price }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="积分："
            >{{ dataInfo?.integral }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="运费："
            >{{ dataInfo?.amount_express }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="实际支付："
            >{{ dataInfo?.payment_amount }}
          </el-descriptions-item>
          <el-descriptions-item width="50%" label="支付到账时间："
            >{{ dataInfo?.payment_datetime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-if="remarkType">
        <div class="item-title item-title-2">
          <div>客服备注</div>
          <el-button
            class="btn"
            v-if="showMemo"
            size="small"
            type="primary"
            @click="openRemark"
            >客服备注</el-button
          >
        </div>
        <div class="detail-section-2">
          <el-descriptions :column="1">
            <el-descriptions-item width="50%" label="客服备注：">
              {{ dataInfo?.cs_remark || "无" }}
            </el-descriptions-item>
          </el-descriptions>
          <el-dialog v-model="wechatVisible" title="客服备注" width="30%">
            <el-form :model="wechatForm" ref="wechatFormRef">
              <el-form-item
                label="客服备注"
                :rules="[
                  {
                    required: true,
                    message: '客服备注...',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  :rows="4"
                  placeholder="客服备注"
                  type="textarea"
                  class="tab1-textarea"
                  v-model="wechatForm.remark"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="wechatVisible = false">取消</el-button>
                <el-button type="primary" @click="submitWechat">
                  确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>

      <div v-if="dataInfo?.status > 3">
        <div class="item-title">物流信息</div>
        <div class="detail-section-4">
          <el-table border stripe :data="dataInfo?.send_log">
            <el-table-column prop="order_no" label="商城订单编号" />
            <el-table-column prop="company_name" label="快递公司名称" />
            <el-table-column prop="send_number" label="快递单号" />
            <el-table-column prop="send_remark" label="备注" />
            <el-table-column prop="send_datetime" label="快递发送时间" />
          </el-table>
        </div>
      </div>
      <div v-if="dataInfo.refund_log && dataInfo.refund_log.legnth > 0">
        <div class="item-title">售后信息</div>
        <div style="padding: 20px 10px">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in dataInfo.refund_log"
              :key="index"
            >
              <div style="font-size: 12px; color: rgb(143, 142, 140)">
                {{ activity.op_username }}
              </div>
              <div style="font-size: 12px; color: rgb(143, 142, 140)">
                {{ activity.op_log }}
              </div>
              <div style="font-size: 12px; color: rgb(143, 142, 140)">
                {{ activity.created_at }}
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import {
  truckApi,
  detailApi,
  orderSendDelApi,
  wechatRemarkApi,
  chgMoneyApi,
} from "@/plugins/api/shopping/order";
const props = defineProps({
  remarkType: {
    type: Boolean,
    default: false,
  },
  priceType: {
    type: Boolean,
    default: false,
  },
  showMemo: {
    type: Boolean,
    default: true,
  },
});

const drawer = ref(false);
function handleClose(done) {
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}

// 初始化
let dataInfo = ref({});
function initFun(row) {
  dataInfo.value = Object.assign({}, row);
  drawer.value = true;
  getSendData();
}
let refund_log = [
  {
    op_username: "张三",
    op_log: "此操作是退款",
    created_at: "2021-12-13 20:21:24",
  },
];
// 步骤条
let stepData = computed(() => {
  if (dataInfo.value.status == 1 || dataInfo.value.status == 2) {
    return 1;
  } else if (dataInfo.value.status == 3) {
    return 2;
  } else if (dataInfo.value.status == 4) {
    return 3;
  } else if (
    dataInfo.value.status == 6 ||
    dataInfo.value.status == 9 ||
    dataInfo.value.status == -1 ||
    dataInfo.value.status == -2
  ) {
    return 4;
  }
});
// 发货信息
function getSendData() {
  detailApi({
    // order_no: 'UA793448659074932237'
    order_no: dataInfo.value.order_no,
  }).then((data) => {});
}
// 发货
function sendOrder(row) {
  ElMessageBox.confirm("确认发货，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      truckApi({
        id: row.id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
// 删除
function delFun(row) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      orderSendDelApi({
        id: row.id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
defineExpose({
  initFun,
});
function imgSrc(path) {
  return import.meta.env.VITE_APP_BASE_API + path;
}
// 改价
let priceVisible = ref(false);
let priceForm = ref({});
let priceFormRef = ref(null);
function openPrice() {
  priceVisible.value = true;
  if (priceFormRef.value) {
    priceFormRef.value.resetFields();
  }
  priceForm.value = {};
  priceForm.value.money = dataInfo.value.amount_real;
}
function submitPrice() {
  if (!priceFormRef.value) return;
  priceFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = {
        order_no: dataInfo.value.order_no,
        money: priceForm.value.money,
      };
      chgMoneyApi(obj).then((data) => {
        ElMessage.success("操作成功！");
        priceVisible.value = false;
        dataInfo.value.amount_real = data.amount_real;
        emit("refreshList", data);
      });
    }
  });
}
// 客服备注
let wechatVisible = ref(false);
let wechatForm = ref({});
let wechatFormRef = ref(null);
function openRemark() {
  wechatVisible.value = true;
  if (wechatFormRef.value) {
    wechatFormRef.value.resetFields();
  }
  wechatForm.value = {};
  wechatForm.value.remark = dataInfo.value.cs_remark;
}
function submitWechat() {
  if (!wechatFormRef.value) return;
  wechatFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = {
        order_no: dataInfo.value.order_no,
        remark: wechatForm.value.remark,
      };
      wechatRemarkApi(obj).then((data) => {
        ElMessage.success("操作成功！");
        wechatVisible.value = false;
        dataInfo.value.cs_remark = data.cs_remark;
        emit("refreshList", data);
      });
    }
  });
}
const emit = defineEmits(["refreshList"]);
//
onMounted(() => {});
</script>
<style lang="scss" scoped>
.order-detail-title {
  font-size: 24px;
  font-weight: 500;
  color: #172b4d;
  line-height: 22px;
}

.order-detail {
  .content-head {
    white-space: nowrap;

    > div {
      display: inline-block;
      height: 15px;
      border-left: 2px solid #5e6c84;
      vertical-align: middle;
      margin: 0 15px;
    }

    .icon {
      color: #5e6c84;
      margin-right: 3px;
      vertical-align: middle;
    }

    label {
      font-size: 14px;
      font-weight: 500;
      color: #5e6c84;
      vertical-align: middle;
    }

    span {
      font-size: 14px;
      font-weight: 500;
      color: #5e6c84;
      vertical-align: middle;
    }
  }

  .item-title {
    margin-top: 20px;
    width: 100%;
    height: 46px;
    background: #fafbfc;
    font-size: 14px;
    font-weight: bold;
    color: #172b4d;
    line-height: 46px;
    position: relative;
    padding-left: 10px;
    box-sizing: border-box;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 2px;
      height: 20px;
      background: #005ecc;
      transform: translateY(-50%);
    }
  }

  .detail-section-1 {
    padding: 10px;
    box-sizing: border-box;
  }

  .item-title-2 {
    display: flex;
    justify-content: space-between;

    .btn {
      align-self: center;
      margin-right: 10px;
    }
  }

  .detail-section-2 {
    padding: 10px;
    box-sizing: border-box;
  }

  .detail-section-3 {
    padding: 10px;
    box-sizing: border-box;

    .manage-info {
      display: flex;

      .img-box {
        align-self: center;
      }

      .right {
        margin-left: 10px;
        align-self: center;

        span {
          color: #409eff;
        }
      }
    }
  }

  .detail-section-4 {
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
